<template>
  <div class="starrocks-cluster-comparison-form">
    <el-form label-width="140px" :model="localValue">
      <!-- 数据源配置 -->
      <section class="form-section">
        <div class="section-title">
          <el-icon><Histogram /></el-icon>
          <span>源集群配置</span>
        </div>
        <el-form-item label="源集群数据源" required>
          <DataSourceSelector
            v-model="sourceDataSourceId"
            service-type="starrocks"
            placeholder="请选择源集群"
          />
        </el-form-item>
      </section>

      <section class="form-section">
        <div class="section-title">
          <el-icon><Histogram /></el-icon>
          <span>目标集群配置</span>
        </div>
        <el-form-item label="目标集群数据源" required>
          <DataSourceSelector
            v-model="targetDataSourceId"
            service-type="starrocks"
            placeholder="请选择目标集群"
          />
        </el-form-item>
      </section>

      <!-- 表选择配置 -->
      <section class="form-section">
        <div class="section-title">
          <el-icon><List /></el-icon>
          <span>表选择</span>
        </div>
        <el-form-item label="数据库名" required>
          <el-input
            v-model="localValue.table_selection.database_name"
            placeholder="请输入数据库名"
            @input="emitParams"
          />
        </el-form-item>
        <el-form-item label="选择方式">
          <el-radio-group v-model="localValue.table_selection.selection_type" @change="emitParams">
            <el-radio label="specific_tables">指定表</el-radio>
            <el-radio label="all_in_database">全库对比</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="localValue.table_selection.selection_type === 'specific_tables'"
          label="表名列表"
        >
          <el-select
            v-model="localValue.table_selection.table_names"
            multiple
            filterable
            allow-create
            placeholder="输入表名后按回车"
            @change="emitParams"
          >
            <el-option
              v-for="table in localValue.table_selection.table_names"
              :key="table"
              :label="table"
              :value="table"
            />
          </el-select>
        </el-form-item>
      </section>

      <!-- 显示字段 -->
      <section class="form-section">
        <div class="section-title">
          <el-icon><Filter /></el-icon>
          <span>显示字段</span>
        </div>
        <el-checkbox-group v-model="localValue.display_fields" @change="emitParams">
          <el-checkbox
            v-for="field in displayFieldOptions"
            :key="field.value"
            :label="field.value"
          >
            {{ field.label }}
          </el-checkbox>
        </el-checkbox-group>
      </section>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, computed, watch } from 'vue'
import { Filter, Histogram, List } from '@element-plus/icons-vue'
import DataSourceSelector from '../../shared/DataSourceSelector.vue'

interface ClusterComparisonParams {
  source_cluster_config: { data_source_id: number | null }
  target_cluster_config: { data_source_id: number | null }
  table_selection: {
    selection_type: 'specific_tables' | 'all_in_database'
    database_name: string
    table_names: string[]
  }
  display_fields: string[]
}

const props = defineProps<{
  modelValue: ClusterComparisonParams | null
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: ClusterComparisonParams): void
}>()

const defaultValue = (): ClusterComparisonParams => ({
  source_cluster_config: { data_source_id: null },
  target_cluster_config: { data_source_id: null },
  table_selection: {
    selection_type: 'specific_tables',
    database_name: '',
    table_names: []
  },
  display_fields: ['table_name', 'source_rows', 'target_rows', 'row_diff', 'diff_rate']
})

const localValue = reactive<ClusterComparisonParams>({
  ...defaultValue(),
  ...(props.modelValue || {})
})

const sourceDataSourceId = computed({
  get: () => localValue.source_cluster_config.data_source_id ?? undefined,
  set: (value: number | undefined) => {
    localValue.source_cluster_config.data_source_id = value ?? null
    emitParams()
  }
})

const targetDataSourceId = computed({
  get: () => localValue.target_cluster_config.data_source_id ?? undefined,
  set: (value: number | undefined) => {
    localValue.target_cluster_config.data_source_id = value ?? null
    emitParams()
  }
})

const displayFieldOptions = [
  { value: 'table_name', label: '表名' },
  { value: 'source_rows', label: '源集群行数' },
  { value: 'source_size', label: '源集群数据大小' },
  { value: 'target_rows', label: '目标集群行数' },
  { value: 'target_size', label: '目标集群数据大小' },
  { value: 'row_diff', label: '行数差值' },
  { value: 'size_diff', label: '数据大小差值' },
  { value: 'diff_rate', label: '差异率' }
]

const emitParams = () => {
  emit('update:modelValue', JSON.parse(JSON.stringify(localValue)))
}

watch(() => props.modelValue, (val) => {
  if (val) {
    Object.assign(localValue, defaultValue(), val)
  }
}, { deep: true })
</script>

<style scoped>
.form-section {
  margin-bottom: 24px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e4e7ed;
}
</style>
